<template>
	<div class="main">
    <scroll :isEnd='isEnd'
            @pullup='loadMore'
            :isLoading='true'
            :preventDefaultException='{ tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|AUDIO)$/ }'
            :tagException='{ className: /(^|\s)chat-box(\s|$)/ }'
            ref='scrollBox'>
      <div v-if="type === 'past'" class="search-wrapper">
        <div class="search-content">
          <p @click="handleFocus()"
            v-show="!isShowInput"
            class="icon-search">
            <span class="search"></span>
            <span class='input-box'>搜索</span>
          </p>
          <p v-show="isShowInput"
          class="search-text">
            <input
              id="input"
              ref="keyword"
              v-model="keywordText"
              type="text"
              @keyup.enter="handleSearch()"
              @blur="handleBlur()">
          </p>
        </div>
      </div>
      <div class="cont">
        <!-- 预约列表 -->
        <ul
          v-if="type === 'reservation' && meetingList.length" class="reservation-list">
          <MeetingItem
            v-for="item in meetingList"
            :meetingInfo="item"
            :key="`meeting_${item.meetingId}`"
            @enterMeeting="handleJump('detail', item)"
            @previewQrcode="previewQrcode"
          />
        </ul>
        <!-- 往期列表 -->
        <ul v-if="type === 'past' && meetingList.length" class="past-list">
          <li class="meeting-item"
            v-for="item in meetingList"
            :key="`meeting_${item.meetingId}`"
            @click="handleJump('detail', item)">
            <div class="meeting-info">
              <div class="info">
                <p class="title">{{item.meetingName}}</p>
                <p class="meeting-id">会议ID：{{item.meetingId}}</p>
                <p class="date">时间：{{item.meetingTime }}</p>
              </div>
              <div class="cover"
                :style="{backgroundImage: `url('${item.coverImg}')`}">
              </div>
            </div>
            <div class="address">
              <p>地点：{{item.meettingPlace}}</p>
            </div>
          </li>
        </ul>
        <!-- 点赞和收藏列表 -->
        <ul
          v-if="type === 'like' || type === 'collect' && meetingList.length"
          :style="{paddingTop: '15px'}"
          class="past-list">
          <template
            v-for="item in meetingList">
            <MeetingItem
              v-if="item.meetingStatus < 3"
              :meetingInfo="item"
              :key="`meeting_${item.meetingId}`"
              @enterMeeting="handleJump('detail', item)"
              @previewQrcode="previewQrcode"/>
            <li class="meeting-item"
              v-if="item.meetingStatus == 3"
              :key="`meeting_${item.meetingId}`"
              @click="handleJump('detail', item)">
              <div class="meeting-info">
                <div class="info">
                  <p class="title">{{item.meetingName}}</p>
                  <p class="meeting-id">会议ID：{{item.meetingId}}</p>
                  <p class="date">时间：{{item.meetingTime }}</p>
                </div>
                <div class="cover"
                  :style="{backgroundImage: `url('${item.coverImg}')`}">
                </div>
              </div>
              <div class="address">
                <p>地点：{{item.meettingPlace}}</p>
              </div>
            </li>
          </template>
        </ul>
        <div class='no-data-text' v-show='noData'>暂无数据</div>
      </div>
    </scroll>
     <!-- 会议二维码 -->
    <meetingQrcode
      v-if="isShowMeetingQrcode"
      :info="currMeetingInfo"
      @handleClose="hidePreview()"/>
	</div>
</template>
<script>
import MeetingItem from './components/meetingItem.vue'
import scroll from '@/components/scroll'
import meetingQrcode from './components/qrcode'

export default {
  components: {
    MeetingItem,
    scroll,
    meetingQrcode
  },
  data () {
    return {
      type: this.$route.params.type,
      isShowInput: false,
      keywordText: '',
      isEnd: true,
      page: 1,
      pageSize: 10,
      meetingList: [],
      noData: true,
      // 会议二维码相关
      isShowMeetingQrcode: false,
      currMeetingInfo: {}
    }
  },
  methods: {
    loadMore () {
      this.init()
    },
    // 获取预约和往期的列表
    fetchMeetingList () {
      let url = `${this.SERVICE_PORTAL}${this.SERVICE_MEETING}/${sessionStorage.getItem('agentId')}/${sessionStorage.getItem('userId')}`
      let params = {
        currentPage: this.page,
        pageSize: this.pageSize
      }
      if (this.keywordText) {
        params.keyword = this.keywordText
      }
      if (this.type === 'reservation') {
        params.meetingStatus = 1
      } else if (this.type === 'past') {
        params.meetingStatus = 2
      }
      this.$get(url, params).then(res => {
        if (res.code === 200) {
          let data = res.data
          if (Number(data.total) <= 0) {
            this.noData = true
          } else {
            this.noData = false
          }
          if (data && data.list && data.list.length) {
            let meetingList = data.list
            this.meetingList = this.meetingList.concat(meetingList)
            if (data.isLastPage) {
              this.isEnd = true
            } else {
              this.isEnd = false
              this.page++
            }
            this.refreshScroll()
          } else {
            this.meetingList = []
            this.isEnd = true
          }
        }
      })
    },
    // 获取点赞收藏的会议列表
    fetchMeetingList2 () {
      let url = ''
      if (this.type === 'like') {
        url = `${this.SERVICE_PORTAL}${this.SERVICE_MEETING}/${sessionStorage.getItem('agentId')}/${sessionStorage.getItem('userId')}/likeList`
      } else if (this.type === 'collect') {
        url = `${this.SERVICE_PORTAL}${this.SERVICE_MEETING}/${sessionStorage.getItem('agentId')}/${sessionStorage.getItem('userId')}/collectList`
      }
      let params = {
        currentPage: this.page,
        pageSize: this.pageSize
      }
      this.$get(url, params).then(res => {
        if (res.code === 200) {
          let data = res.data
          if (Number(data.total) <= 0) {
            this.noData = true
          } else {
            this.noData = false
          }
          if (data && data.list && data.list.length) {
            let meetingList = data.list
            this.meetingList = this.meetingList.concat(meetingList)
            if (data.isLastPage) {
              this.isEnd = true
            } else {
              this.isEnd = false
              this.page++
            }
            this.refreshScroll()
          } else {
            this.meetingList = []
            this.isEnd = true
          }
        }
      })
    },
    refreshScroll () {
      setTimeout(() => {
        if (this.$refs.scrollBox) {
          this.$refs.scrollBox.refresh()
        }
      }, 0)
    },
    // ---------- 预览会议二维码 -----------
    previewQrcode (info) {
      this.currMeetingInfo = info
      this.isShowMeetingQrcode = true
    },
    hidePreview () {
      this.isShowMeetingQrcode = false
      this.currMeetingInfo = {}
    },
    // ------------- 搜素相关 --------------
    handleSearch () {
      this.$refs.keyword && this.$refs.keyword.blur()
    },
    // 处理聚焦
    handleFocus () {
      this.isShowInput = true
      this.$nextTick(() => {
        this.$refs.keyword && this.$refs.keyword.focus()
      })
    },
    // 处理失焦
    handleBlur () {
      if (!this.keywordText) {
        this.isShowInput = false
      }
      this.meetingList = []
      this.page = 1
      this.init()
    },
    handleJump (type, info) {
      switch (type) {
        case 'detail':
          this.linkTo('meetingHome', {}, { meetingId: info.meetingId })
          break
      }
    },
    init () {
      switch (this.type) {
        case 'reservation':
        case 'past':
          this.fetchMeetingList()
          break
        case 'like':
        case 'collect':
          this.fetchMeetingList2()
          break
      }
    }
  },
  mounted () {
    document.addEventListener('click', (e) => {
      if (e.target.id !== 'input') {
        this.$refs.keyword && this.$refs.keyword.blur()
      }
    }, false)
  },
  beforeDestroy () {
    document.removeEventListener('click', (e) => {
      if (e.target.id !== 'input') {
        this.$refs.keyword && this.$refs.keyword.blur()
      }
    }, false)
  },
  created () {
    switch (this.type) {
      case 'reservation':
        document.title = '最新预约'
        break
      case 'past':
        document.title = '往期会议'
        break
      case 'like':
        document.title = '点赞列表'
        break
      case 'collect':
        document.title = '收藏列表'
        break
    }
    this.init()
  }
}
</script>
<style lang="stylus" scoped>
.main
	width 100%
	height 100vh
	overflow-y auto
	background #F9FAFB
	.search-wrapper
    width 100%
    .search-content
      width 100%
      height 80px
      padding 20px 15px
      box-sizing border-box
      .icon-search
        width 100%
        height 40px
        background #fff
        border-radius 8px
        display flex
        justify-content center
        align-items center
        padding 10px 0
        .search
          display inline-block
          width 16px
          height 16px
          background url('../../assets/img/ic_search@2x.png') no-repeat center / 100%
        .input-box
          border none
          font-size 15px
          height 20px
          line-height 20px
          outline none
          margin-left 5px
          color #BCBCBC
      .search-text
        width 100%
        height 40px
        background #fff
        border-radius 8px
        padding 10px 0
        box-sizing border-box
        input
          width 100%
          height 20px
          line-height 20px
          font-size 15px
          color #333
          padding 0 15px
          box-sizing border-box
  .cont
    width 100%
    // 预约
    .reservation-list
      width 100%
      padding 20px 15px 0
    // 往期
    .past-list
      width 100%
      padding 0 15px
      .meeting-item
        width 100%
        background #fff
        border-radius 8px
        margin-bottom 20px
        .meeting-info
          width 100%
          display flex
          justify-content space-between
          align-items center
          padding 17px 16px
          position relative
          &:after
            content ''
            display block
            width calc(100% - 24px)
            height 1px
            background #eee
            position absolute
            left 50%
            bottom 0
            transform translate(-50%, 0)
          .info
            width calc(100% - 108px)
            .title
              width 100%
              height 20px
              padding 0
              line-height 20px
              font-size 16px
              font-weight 700
              color #333
              noWrap()
            .meeting-id, .date
              line-height 16px
              font-size 12px
              color #999
            .meeting-id
              margin-top 14px
            .date
              margin-top 5px
          .cover
            width 84px
            height 68px
            background-repeat no-repeat
            background-position center
            background-size cover
            border-radius 8px
        .address
          width 100%
          padding 15px 10px
          p
            width calc(100% - 90px)
            height 16px
            line-height 16px
            font-size 12px
            color #666
            noWrap()
    .no-data-text
      width calc(100% - 30px)
      height 160px
      margin 0 auto
      // background #fff
      line-height 240px
      text-align center
      font-size 12px
      color #B2B2B2
      border-radius 8px
</style>
